<template>
  <div class="service">
    <div class="newfix">
    <div class="charge-title"> 
      <div class="chargetext">智能门禁</div>
      <div class="clockkinds">
        <div class="remoteunlock" @click="toPage('remoteunclock')">
          <i class="el-icon-unlock" id="i"></i>
          <br>远程开锁
        </div>
         <div class="codeunlock" @click="toPage('codeunclock')">
           <i class="el-icon-key" id="i"></i>
           <br>二维码开锁
         </div>
         </div>
         
    </div>
    
    </div>
  </div>
</template>
<script>
export default {
  name: 'Access',
  data(){
    return{
      text:'',
    }
  },
  methods: {
     
      toPage(text){
       this.text=text;
       //console.log(this.selectcharge);
       if(this.text=='remoteunclock'){
           this.$router.push({
          path: '/remoteunclock',
        })
       }
       if(this.text=='codeunclock'){
           this.$router.push({
          path: '/codeunclock',
       })
    }
  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

 .charge-title{
  height:40px;
  width:375px;
  margin-bottom:15px;
  margin-top:10px;
 }
 
  .newfix{
     background-color: #dfeeea;
    height:200px;
    width:100%;
    border-radius:10px;
    margin-top:-10px;
    
  }
  .chargetext{
    font-size:14px;
    font-weight: bold;
    position: absolute;
    margin-top:15px;
    margin-left:15px;
    color: #5e8b7e;
  }
  .el-dropdown-link {
    cursor: pointer;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown{
     font-size:13px;
    position: absolute;
     margin-top:15px;
    margin-left:280px;
  }
  .clockkinds{
    width:325px;
    height:100px;
    padding-top:60px;
    margin-left:17px;
    display: flex;
  }
  .remoteunlock{
    height:100px;
    width:100px;
     margin-left: 35px;
    margin-right: 50px;
    background-color: #F7F7F7;
    box-shadow: 1px 1px 5px #a7c4bc;
    border-radius: 10px;
    text-align: center;
  }
  .codeunlock{
     height:100px;
    width:100px;
    background-color: #F7F7F7;
    box-shadow: 1px 1px 5px #a7c4bc;
    border-radius: 10px;
    text-align: center;
  }
  #i{
    font-size:25px;
    margin-top:25px;
    margin-bottom: 10px;
    color: #5e8b7e;
  }
 
</style>
